import { computed } from 'vue'
import { useRoute } from 'vue-router'
import './index.css'

const FBreadcrumb = () => {
  const menuList = window.$menus
  // 面包屑菜单
  const route = useRoute()
  const getParent = (routeList, currentRoute) => {
    const breadcrumbList = []
    const pushParents = (list, route) => {
      list.find((item) => {
        // 先将当前路由推进去
        if (item.code === route) {
          breadcrumbList.unshift(item)
          // 再看当前路由有没有父级
          if (item.parentId) {
            // 有的话，将父级推进去
            list.find((key) => {
              if (key.id === item.parentId) {
                pushParents(list, key.code)
              }
            })
          }
        }
      })
    }
    pushParents(routeList, currentRoute)
    return breadcrumbList
  }
  getParent(menuList, route.fullPath)
  const breadList = computed(() => getParent(menuList, route.fullPath))
  return (
    <el-breadcrumb class="f-breadcrumb" separator="/">
      {route.fullPath === '/' ? (
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      ) : (
        breadList.value.map((item) => {
          return <el-breadcrumb-item to={item.href}>{item.name}</el-breadcrumb-item>
        })
      )}
    </el-breadcrumb>
  )
}

export default FBreadcrumb
